

<template>
  <div class="main-nav-list header">
    <div v-for="(item, index) in NAV_LIST" style="cursor: pointer;" :class="{ 'main-nav-active': currentIndex === index }"
      :key="index" @click="setCurrentIndex(item, index)">
      {{ item.name }}
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, watch } from 'vue';
import { NAV_LIST } from '../const/nav'
import { useRouter, useRoute } from 'vue-router'


const router = useRouter()
const route = useRoute()

const currentIndex = ref(0)

const setCurrentIndex: any = (data: any, index: number) => {
  if (data.url === route.fullPath) {
    return
  }
  currentIndex.value = index
  router.push(data.url)
}

watch(route, (val) => {
  for (let i = 0; i < NAV_LIST.length; i++) {
    if (val.fullPath.indexOf(NAV_LIST[i].url) !== -1) {
      currentIndex.value = i
    }
  }
}, { deep: true })
</script>
<style scoped>
.header {
  width: 100%;
  height: 100px;
  background-color: #ccc;
}

.main-nav-active {
  color: red;
}
</style>
